<template>
    <div class="zs-content-common">
	    <div class="zs-content-top">
            <div class="fl logo"></div>
            <div class="fl lefts-top">黑龙江省青年讲师团管理系统</div>
            <div class="fr zs-login" style="padding-right:20px;">
                <span>欢迎您 {{ userName }} &nbsp;&nbsp;</span>
                <el-tooltip class="item" effect="dark" content="点击修改密码" placement="bottom-end">
                    <i class="el-icon-s-tools" @click="repeatFn"></i>
                </el-tooltip>
                 <button style="line-height:60px;cursor:pointer;" class="btn-layout" @click="LogOut">退出</button>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" title="退出登录"  :visible.sync="dialogVisible"  width="410px"  @close="closeDialog">

            <p class="tc-loginOut">确定退出登录吗？</p>
            <div class="tc-big-btn">
                 <el-button @click="sureFn">确认</el-button>
                 <el-button @click="closeDialog" >取消</el-button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="修改密码"  :visible.sync="dialogCode"  width="410px"  @close="closeCode">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="原密码" prop="oldWord">
                    <el-input type="password" v-model="ruleForm.oldWord" autocomplete="off" maxlength="14"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newWord">
                    <el-input v-model="ruleForm.newWord" type="password" maxlength="14"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="aginWord">
                    <el-input type="password" v-model="ruleForm.aginWord" autocomplete="off" maxlength="14"></el-input>
                </el-form-item>
                <div class="submit">
                    <el-button   class="save" @click="submitForm('ruleForm')" size="small">确认</el-button>
                    <el-button   class="save"  size="small" @click="dialogCode=false">取消</el-button>
                </div>
             </el-form>
        </el-dialog>
    </div>
</template>

<script>
   import { getToken, setToken, removeToken } from '@/utils/auth'
    export default {
        data() {
            var validatePass = (rule, value, callback) => {

            if (value === '') {
                callback(new Error("请输入密码"))
            } else {

                if(this.ruleForm.aginWord == this.ruleForm.newWord){
                    this.$refs.ruleForm.validateField('aginWord')
                }
                    callback()
                }
            }
            var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.ruleForm.newWord) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
            }
            return {
                userName:'',
                //标题
                topTitle:'',
                dialogVisible:false,
                //修改密码弹窗
                dialogCode:false,
                //表单
                ruleForm:{
                    oldWord:'',
                    newWord:'',
                    aginWord:''
                },
                rules: {
                    oldWord: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                    ],
                    newWord: [
                        { required: true, message: "请输入6-14位的英文或数字或'-_'的密码", trigger: 'blur' },
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    aginWord: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ],
			    },
            }
        },
        created() {
            this.headInfo()
            this.getUserName();
        },
        methods:{
            // 退出登录
            LogOut() {
                let self = this;
                this.dialogVisible = true

            },
            getUserName(){
                let self = this
			    self.$http.get('/admin/name').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.userName = res.data;
                    }else {
                        self.$message.error(res.message)
                    }


                },(err) => {
                    console.log('err');
                })
            },
            //点击确认执行退出
            sureFn(){
                //this.$store.dispatch("LogOut")
                let self = this
			    self.$http.get('/logout').then((response) => {
						let res = response.data
						if(res.code == '200') {

							self.$router.push({
                                path:'/login'
                            })
                            removeToken()
                            self.$store.commit('SET_ROLES', '')

						}else {
							self.$message.error(res.message)
						}


					},(err) => {
						console.log('err');
					})

            },
            //关闭弹窗
            closeDialog(){
                this.dialogVisible = false
            },
            //修改密码
            repeatFn(){
                this.dialogCode  = true
            },
            //关闭修改弹窗
            closeCode(){
                let self =this
                this.$nextTick(function(){
                    self.$refs.ruleForm.resetFields();
                })
            },
            //保存
            submitForm(ruleForm){
                let self =this
                self.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        self.$http.post('/admin/password/update', {
                            newPassword:self.ruleForm.newWord,
                            oldPassword:self.ruleForm.oldWord,
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$alert('修改成功,点击确定退出登录', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        self.$router.push({
                                            path:'/login'
                                        })
                                        removeToken()
                                        self.$store.commit('SET_ROLES', '')
                                    }
                                });
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //获取头部信息
            headInfo(){
                // let self = this
                // self.$http.get("/certificate/system/unauthorized/config?keys=project_name").then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                //         self.topTitle = res.data.config.project_name[0].keyValue
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
		    },
        }


    };
</script>

<style scoped>
    .zs-content-common{
        width:100%;
        margin:  0 auto;


    }
    .zs-content-top{
        position: relative;
        z-index: 1;
        height: 60px;
        line-height: 60px;
        color: #fff;
        background: #001529;

    }
     .logo{
            font-size: 22px;
            font-weight: bold;
            padding-left: 24px;

        }
     .icon-mima1{
            font-size: 21px;
            margin-right: 5px;
            cursor: pointer;
            vertical-align:sub;
        }
     .submit{
        margin: 0px auto;
        width: 145px;
    }
    .el-input{
        width: 85%;
    }
    .btn-layout{
        color: #fff;
    }
    .tc-loginOut{
        text-align: center;
    }
    .tc-big-btn{
        text-align: center;
        margin: 20px auto;
    }
</style>

